<template>
    <div id="app">
        <el-button type="primary" @click="openDialog">添加</el-button>
        <el-table
        :data="tableData"
        style="width: 100%">
            <el-table-column
                prop="username"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="theory"
                label="理论成绩"
                width="180">
            </el-table-column>
            <el-table-column
                prop="skill"
                label="技能成绩">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="limit"
            @current-change="changeNum"
            >
        </el-pagination>
        
        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%">
        <el-form :model="userInfo">
            <el-form-item label="姓名">
                <el-input v-model="userInfo.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="理论成绩">
                <el-input v-model="userInfo.theory" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="技能成绩">
                <el-input v-model="userInfo.skill" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="current">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    created(){
        this.getData();
    },
    data(){
        return {
            tableData: [],          //表格的数据
            dialogVisible: false,    //控制弹窗显示隐藏
            userInfo:{
                username:'',
                skill:'',
                theory:''
            },
            total:0,             //总条数
            pagenum:1,
            limit:2,
            id:null
        }
    },
    methods:{
        getData(){
            this.$http.get('/api/list',{params:{limit:this.limit,pagenum:this.pagenum}}).then(res => {
                console.log(res);
                if(res.data.code === 1){
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                }
            })
        },
        openDialog(){
            this.dialogVisible = true;
        },
        //确定
        current(){
            //添加 //编辑
            /**
             * 请求地址
             * 
             * 请求方式
             * 
             * 携带参数 id
             * 
            */
           let url = '',
               type = '';
            if(this.id){
                //编辑
                url = '/api/update';
                type = 'put';
            }else{
                //添加
                url = '/api/add';
                type = 'post';
            }
            this.$http[type](url,{...this.userInfo,id:this.id}).then(res => {
                //1.弹窗关闭  2.清空表单  3.重新渲染页面
                console.log(res);
                if(res.data.code === 1){
                    this.dialogVisible = false;
                    this.userInfo = {
                        username:'',
                        skill:'',
                        theory:''
                    };
                    this.getData();
                }else if(res.data.code === 4){
                    alert('用户已存在')
                }
            })
        },
        //改变页码
        changeNum(index){
            console.log(index)
            this.pagenum = index;
            this.getData();
        },
        //编辑
        handleEdit(index,data){
            console.log(index,data);
            //1.打开你弹窗，给表单赋值
            this.dialogVisible = true;
            let {username,theory,skill,id} = data;
            this.userInfo = {
                username,
                theory,
                skill
            }
            this.id = id;
        }
    }
}
</script>

<style lang="scss">

</style>
